import MainHeader from '@/components/main-header/index'
import testAvatar from '@/static/test-avatar.jpeg'
import { clearState } from '@/utils/clearState'

export default {
  name: 'User',
  components: {
    MainHeader,
  },
  data() {
    return {
      staffAvatarUrl: testAvatar,
      staffName: '未登录',
      staffId: '未获取ID',
      userInfoList: [
        {
          id: 1,
          title: '个人信息',
          desc: '编辑',
          url: '/pages/classification/user/edit-userinfo/index',
        },
        {
          id: 2,
          title: '工资条',
          desc: '工资查询',
          url: '/pages/classification/user/salary-show/index',
        },
        {
          id: 3,
          title: '绩效',
          desc: '我的绩效',
          url: '/pages/classification/user/performance-show/index',
        },
        {
          id: 4,
          title: '修改密码',
          desc: '密码变更',
          url: '/pages/classification/user/change-password/index',
        },
      ],
      appInfoList: [
        {
          id: 2,
          title: '关于我们',
          desc: '人力资源管理俱乐部',
          url: '/pages/classification/user/about-us/index',
        },
        {
          id: 3,
          title: '小程序版本',
          desc: '1.0.0',
          url: '/pages/classification/user/version/index',
        },
      ],
    }
  },
  mounted() {
    if (this.$store.state.userInfo) {
      this.staffId = this.$store.state.userInfo.jobNumber
      this.staffName = this.$store.state.userInfo.name
    }
  },
  methods: {
    loginOut(goal) {
      this.$dialog
        .confirm({
          context: this,
          title: '退出登录',
          message: '确定要退出你的账号么?',
        })
        .then(() => {
          this.goTo(goal)
          // vuex状态清空
          clearState(this.$store)
        })
        .catch(() => {
          // on cancel
        })
    },
    goTo(goal) {
      uni.navigateTo({
        url: goal,
      })
    },
  },
  // 监听vuex中的数据变化
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.staffId = newVal.jobNumber
          this.staffName = newVal.name
        }
      },
      immediate: true,
      deep: true,
    },
  },
}
